<template>
  <div class="drag-container point-none">
    <div class="point-none img-container" v-if="activeFeature != null" :style="getStyle()">
      <span class="title">{{activeFeature.title}}</span>
      <img class="point-none" :src="iconImageUrl" alt="">
    </div>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    top: Number,
    left: Number
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['activeFeature', 'iconImageUrl'])
  },
  methods: {
    getStyle() {
      return {
        top: this.top - 30 + 'px',
        left: this.left - 40 + 'px',
        width: '80px',
        height: '60px'
      }
    }
  }
}
</script>

<style lang="scss">
.drag-container {
  .img-container {
    position: absolute;
    z-index: 1000;
    .title {
      top: -10px;
      width: 300px;
      position: absolute;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
